<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双11掷骰子</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="./js/js.js"></script>
    <script src="./js/jquery-1.9.1.min.js"></script>
</head>

<body>
    <div class="bigbg">
        <!-- 我的奖品 -->
        <img class="myprize" src="./img/myprize.png" alt="">
        <!-- 规则 -->
        <img class="rule" src="./img/rule.png" alt="">
        <img class="peo" src="./img/people.png" alt="">
        <!-- 去分享 -->
        <div class="bigleft">
            <div class="share">去分享</div>
        </div>
        <!-- 骰子 -->
        <div class="bgmid">
            <img class="saizi" src="./img/1.png" alt="">
            <div class="count">掷骰子x3</div>
        </div>
        <!-- 做任务 得机会 -->
        <div class="bigright">
            <div class="renwu">做任务 得机会</div>
        </div>
    </div>
    <button class="imgshare">分享</button>
    <button class="imgend">游戏结束</button>
    <button class="dialogone">弹窗1</button>
    <button class="dialogtwo">弹窗2</button>
    <button class="dialogthree">弹窗3</button>
    <button class="dialogfour">弹窗4</button>
    <button class="dialogfive">弹窗5</button>
    <button class="dialogsix">弹窗6</button>
    <button class="dialogseven">弹窗7</button>
    <button class="dialogeight">弹窗8</button>
    <button class="dialognine">弹窗9</button>


    <!-- 做任务得机会弹窗 -->
    <div class="dialogrenwu" style="display: none;">
        <div class="wrapper">
            <div class="bg2">
                <img class="close" src="./img/close.png" alt="">
                <img class="weixintip" src="./img/weixintip.png" alt="">
                <div class="tip_title">需点击3个产品的“去浏览”，方可得一次掷骰子机会哦</div>
                <div class="share_item">
                    <div class="share_item_left">
                        <img class="icon1" src="./img/icon1.png" alt="">
                        <div class="share_desc">
                            <div>智慧家庭超值礼包</div>
                            <div>视频对话聊天 让爱零距离</div>
                        </div>
                    </div>
                    <div class="icon_bg">
                        <div class="icon_bg_txt">去浏览</div>
                    </div>
                </div>
                <div class="share_item">
                    <div class="share_item_left">
                        <img class="icon1" src="./img/icon2.png" alt="">
                        <div class="share_desc">
                            <div>网上装宽带 智享三千兆</div>
                            <div>云网安全服务优</div>
                        </div>
                    </div>
                    <div class="icon_bg">
                        <div class="icon_bg_txt">去浏览</div>
                    </div>
                </div>
                <div class="share_item">
                    <div class="share_item_left">
                        <img class="icon1" src="./img/icon3.png" alt="">
                        <div class="share_desc">
                            <div>全屋智能理想家</div>
                            <div>全屋定制 一站配齐</div>
                        </div>
                    </div>
                    <div class="icon_bg">
                        <div class="icon_bg_txt">去浏览</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 奖品弹窗 -->
    <div class="dialog_myprize" style="display: none;">
        <div class="bg_myprize">
            <div style="height: 1px;"></div>
            <div>
                <img class="tip1" src="./img/weixintip.png" alt="">
                <div class="tipword">具体了解奖品使用规则，请前往游戏活动 页面的”规则“中查看”</div>
            </div>
            <div class="itembox">
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/icon_999.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div>999</div>
                                <div>元翼支付金</div>
                            </div>
                            <div>仅适用于办理新装全屋智能套餐</div>
                        </div>
                    </div>
                    <div class="icon4"></div>
                </div>
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/icon_200.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div>200</div>
                                <div>元翼支付金</div>
                            </div>
                            <div>仅适用于办理新装5G融合套餐</div>
                        </div>
                    </div>
                    <div class="icon4"></div>
                </div>
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/icon_180.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div>180</div>
                                <div>元翼支付金</div>
                            </div>
                            <div>仅适用于办理新装单宽带套餐</div>
                        </div>
                    </div>
                    <div class="icon4"></div>
                </div>
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/icon_50.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div>50</div>
                                <div>元翼支付金</div>
                            </div>
                            <div>仅适用于办理双智家活动</div>
                        </div>
                    </div>
                    <div class="icon4"></div>
                </div>
                <!-- qq音乐 -->
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/qqmusic.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div></div>
                                <div>QQ音乐绿钻豪华版月卡 </div>
                            </div>
                            <div>一个用户只能领取一次，抽中后，会有短信通知，按照 短信内容操作即可 </div>
                        </div>
                    </div>
                </div>
                <!-- 喜马拉雅月卡 -->
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/xima_month.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div></div>
                                <div>喜马拉雅会员月卡 </div>
                            </div>
                            <div>一个用户只能领取一次，抽中后，会有短信通知，按照 短信内容操作即可 </div>
                        </div>
                    </div>
                </div>
                <!-- 喜马拉雅周卡 -->
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/xima_week.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div></div>
                                <div>喜马拉雅会员周卡</div>
                            </div>
                            <div>一个用户只能领取一次，抽中后，会有短信通知，按照 短信内容操作即可 </div>
                        </div>
                    </div>
                </div>
                <!-- 1G流量卡 -->
                <div class="myprize_item1">
                    <div class="myprize_itemleft">
                        <img class="icon5" src="./img/1G.png" alt="">
                        <div class="prizebox">
                            <div class="prizeboxtop">
                                <div></div>
                                <div>1G国内流量包</div>
                            </div>
                            <div>中奖后24小时充值到用户账户，当月使用，次月清零，不可结转</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 活动规则弹窗 -->
    <div class="dialog_rule" style="display: none;">
        <div class="rule_bg">
            <div class="rulecontent">
                <div class="bold">一、活动时间：</div>
                <div class="gray">2021年10月28日-2021年11月15日</div>
                <div class="bold">二、活动规则：</div>
                <div class="gray">
                    1.客户参与游戏，每人每天有1次初始机会，每天最多三次掷骰子机会，可通过点击“去分享”或者点击“做任务”按钮各获取掷骰子一次机会，“去分享”按钮每天无论分享多少次，
                    只能得掷骰子一次机会；“做任务”按钮，需客户点击“去浏览”双智家、全屋智能和宽带三个产品的页面，即可获取一次掷骰子的机会。</div>
                <div class="gray">2.每次步数随着骰子点数而走，最大一次6步，走到有奖品的位置会弹出弹窗告知客户获得的奖品，走到数字位置代表未获得奖品。</div>
                <div class="gray">3.到了终点会自动返回到起点，重新走（不影响再次抽奖叠加）。</div>
                <div class="bold">三、奖品明细：</div>
                <div class="gray">
                    ①999元翼支付金:用户在活动游戏页面抽取999元翼支付金，在“我的奖品”中点击“去使用”，进入活动页面去线上预约，预约成功后需在线下门店办理新装全屋智能套餐，翼支付金分两次充值到账户中，
                    产品竣工后，第一次在7个工作日内充值500到办理套餐的账户中，第二次在次月1号充值剩余499到办理套餐的账户中，过户、拆机等非正常状态不予充值；；</div>
                <div class="gray">
                    ②200元翼支付金:用户在活动游戏页面抽取200元翼支付金，在“我的奖品”中点击“立即办理”，进入活动页面，了解产品详情，点击“立即办理”新装5G融合套餐，产品竣工后，7个工作日内充值到办理套餐的账户中，过户，拆机等非正常状态不予充值；
                </div>
                <div class="gray">
                    ③180元翼支付金:用户在活动游戏页面抽取180元翼支付金，在“我的奖品”中点击“立即办理”，进入活动页面，了解产品详情，点击“立即办理”新装单宽带套餐，宽带竣工后，10个工作日内充值到用户办理宽带时的联系号码的翼支付账户里（仅限安徽电信手机用户），联系电话为异网手机号，或非本省电信号码则无法领取翼支付金，视为放弃领取权益；过户，拆机等非正常状态不予充值；
                </div>
                <div class="gray">
                    ④50元翼支付金:用户在活动游戏页面抽取50元翼支付金，点击“立即办理”后，直接跳转双智家活动页面，成功办理业务，在产品竣工后，次月10个工作日内充值到办理套餐的账户中，过户，拆机等非正常状态不予充值；
                </div>
                <div class="gray">
                    ⑤20元礼品券:用户需到门店体验全屋智能产品方可核销优惠券，核销后立即到账。
                </div>
                <div class="gray">
                    ⑥喜马拉雅会员月卡\QQ音乐绿钻豪华版月卡:一个用户只能领取一次，24小时内充值到您参与活动的手机号码中，有效期30天，过期作废，不延期，并且会收到中奖短信,按照短信内容操作即可。</div>
                <div class="gray">⑦1G国内流量包:活动期间最多获得10次。流量不可共享、不可提速，24小时内自动充值到用户参与活动的手机账户中，当月使用，次月清零，不可结转；</div>
                <div class="gray">⑧喜马拉雅会员周卡:一个用户只能领取一次，24小时内充值到您参与活动的手机号码中，有效期7天，过期作废，不延期，并且会收到中奖短信,按照短信内容操作即可。</div>
                <div class="gray">
                    *优惠券不可叠加使用，即用户办理一项业务只可用一张优惠券。本活动奖品（除了流量包）在活动期间同一个手机号码只可以领取一次。（其中流量包活动期间最多可以领10次，每天最多一次）</div>
                <div class="gray">*本次活动仅限安徽电信客户参与</div>
            </div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 中奖弹窗 20元 -->
    <div class="dialog_zhongjiang1" style="display: none;">
        <div class="zhongjiang1">
            <div class="jiang_num">20(已领取)</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 中奖弹窗 50元 -->
    <div class="dialog_zhongjiang2" style="display: none;">
        <div class="zhongjiang2">
            <div class="jiang_num">50(已领取)</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 中奖弹窗 180元 -->
    <div class="dialog_zhongjiang3" style="display: none;">
        <div class="zhongjiang3">
            <div class="jiang_num">180(已领取)</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 中奖弹窗 200元 -->
    <div class="dialog_zhongjiang4" style="display: none;">
        <div class="zhongjiang4">
            <div class="jiang_num">200(已领取)</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 中奖弹窗 999元 -->
    <div class="dialog_zhongjiang5" style="display: none;">
        <div class="zhongjiang5">
            <div class="jiang_num">999(已领取)</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 喜马拉雅月卡弹窗 -->
    <div class="dialog_zhongjiang6" style="display: none;">
        <div class="zhongjiang6">
            <div class="yinyueword">喜马拉雅会员月卡</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 喜马拉雅周卡弹窗 -->
    <div class="dialog_zhongjiang7" style="display: none;">
        <div class="zhongjiang7">
            <div class="yinyueword">喜马拉雅会员周卡</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 1G流量包弹窗 -->
    <div class="dialog_zhongjiang8" style="display: none;">
        <div class="zhongjiang8">
            <div class="yinyueword">1G国内流量包</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- qq会员弹窗 -->
    <div class="dialog_zhongjiang9" style="display: none;">
        <div class="zhongjiang9">
            <div class="yinyueword">QQ音乐绿钻豪华版月卡</div>
        </div>
        <img class="close_prize" src="./img/close.png" alt="">
    </div>


    <!-- 双11启动页弹窗 -->
    <div class="dialog11" style="display: none;">
        <img class="dialog_11bg" src="./img/dialog_bg.png" alt="">
        <img class="close_prize" src="./img/close1.png" alt="">
    </div>

    <!-- 分享弹窗 -->
    <div class="dialog_share" style="display: none;">
        <img class="share_img" src="./img/img_share.png" alt="">
        <img class="close_prize" src="./img/close.png" alt="">
    </div>

    <!-- 游戏结束弹窗 -->
    <div class="dialog_end" style="display: none;">
        <img class="share_img" src="./img/img_end.png" alt="">
        <img class="close_prize" src="./img/close.png" alt="">
    </div>
</body>

<script>

    $('.bigright').click(function () {
        $('.dialogrenwu').show();
    })

    $('.close').click(function () {
        $('.dialogrenwu').hide();
    })


    //弹窗1 20元
    $('.dialogone').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang1'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //弹窗2
    $('.dialogtwo').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang2'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //弹窗3
    $('.dialogthree').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang3'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //弹窗4
    $('.dialogfour').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang4'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //弹窗5
    $('.dialogfive').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang5'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //弹窗6
    $('.dialogsix').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang6'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })
    //弹窗7
    $('.dialogseven').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang7'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //弹窗8
    $('.dialogeight').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang8'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })
    //弹窗9
    $('.dialognine').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_zhongjiang9'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })
    //我的奖品弹窗
    $('.myprize').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_myprize'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //活动规则弹窗
    $('.rule').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_rule'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //双11弹窗
    $('.bigleft').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog11'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //分享弹窗
    $('.imgshare').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_share'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    //游戏结束弹窗
    $('.imgend').click(function () {
        layer.open({
            type: 1,
            content: $('.dialog_end'),
            skin: 'layui-layer-nobg',
            title: false,
            closeBtn: 0,
            shade: 0.5,
            shadeClose: true
        });
    })

    $('.close_prize').click(function () {
        layer.closeAll();
    })

</script>

<script>
    $(document).ready(function () {

        layui.use(['layer'], function () {
            var layer = layui.layer
            var nowpos = 0;// 当前位置数
            var count = 0;//总点数

            var isflag = true;

            // var arr = [1, 1, 1]
            var b = 0;

            $('.count').click(function () {
                if (isflag == true) {
                    isflag = false;
                    $('.saizi').attr('src', './img/saizi.gif')
                    setTimeout(() => {
                        var index = Math.round(Math.random() * 5 + 1);
                        // var index = 2;
                        // var index = arr[b];
                        // b += 1;

                        console.log('index' + index)
                        var nowpos = count;   // nowpos 当前位置点数
                        count = count + index;  //总点数


                        var conversion = (parseFloat(document.documentElement.style.fontSize)) / 10


                        $('.saizi').attr('src', './img/' + index + '.png')

                        //1-4
                        if (count <= 4) {
                            //走1-4
                            $('.peo').animate({
                                right: '+=' + (40 * (count - nowpos) * conversion) + 'px',
                                top: '+=' + (40 * (count - nowpos) * conversion) + 'px'
                            }, 'slow', function () {
                                isflag = true
                                if (count == 1) {
                                    layer.open({
                                        type: 1,
                                        content: $('.dialog_zhongjiang1'),
                                        skin: 'layui-layer-nobg',
                                        title: false,
                                        closeBtn: 0,
                                        shade: 0.5,
                                        shadeClose: true
                                    });
                                }
                                if (count == 3) {
                                    layer.open({
                                        type: 1,
                                        content: $('.dialog_zhongjiang6'),
                                        skin: 'layui-layer-nobg',
                                        title: false,
                                        closeBtn: 0,
                                        shade: 0.5,
                                        shadeClose: true
                                    });
                                }
                                if (count == 4) {
                                    $('.peo').animate({
                                        right: '-=' + 30 * conversion + 'px',
                                        top: '+=' + 5 * conversion + 'px'
                                    })
                                    count = count + 1;
                                    nowpos = count;
                                }
                            })
                        }
                        //4-7
                        else if (4 < count && count <= 7) {
                            if (nowpos < 4) {
                                //把1-4走完
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                })
                                //走4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (count - 4) * conversion + 'px',
                                    top: '+=' + 10 * (count - 4) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true
                                    if (count == 6) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                            else if (nowpos >= 4) {
                                //走 4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (count - nowpos) * conversion + 'px',
                                    top: '+=' + 10 * (count - nowpos) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                    if (count == 6) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                        }

                        //7-10
                        else if (count > 7 && count <= 10) {
                            if (nowpos < 4) {
                                //把1-4走完
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //把4-7走完
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - 4) * conversion + 'px',
                                    top: '+=' + 5 * (7 - 4) * conversion + 'px'
                                }, 'slow')
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - 7) * conversion + 'px',
                                    top: '-=' + 25 * (count - 7) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true;
                                    //多走一步
                                    if (count == 8) {
                                        $('.peo').animate({
                                            right: '-=' + 40 * conversion + 'px',
                                            top: '-=' + 25 * conversion + 'px'
                                        }, function () {
                                            layer.open({
                                                type: 1,
                                                content: $('.dialog_zhongjiang1'),
                                                skin: 'layui-layer-nobg',
                                                title: false,
                                                closeBtn: 0,
                                                shade: 0.5,
                                                shadeClose: true
                                            });
                                        })
                                        count = count + 1;
                                        nowpos = count;
                                    }
                                    else if (count == 9) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                            else if (nowpos >= 4 && nowpos < 7) {
                                //把4-7走完
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - nowpos) * conversion + 'px',
                                    top: '+=' + 5 * (7 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - 7) * conversion + 'px',
                                    top: '-=' + 25 * (count - 7) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true
                                    //多走一步
                                    if (count == 8) {
                                        $('.peo').animate({
                                            right: '-=' + 40 * conversion + 'px',
                                            top: '-=' + 25 * conversion + 'px'
                                        }, function () {
                                            layer.open({
                                                type: 1,
                                                content: $('.dialog_zhongjiang1'),
                                                skin: 'layui-layer-nobg',
                                                title: false,
                                                closeBtn: 0,
                                                shade: 0.5,
                                                shadeClose: true
                                            });
                                        })
                                        count = count + 1;
                                        nowpos = count;
                                    }
                                    else if (count == 9) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                            else if (nowpos >= 7) {
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - nowpos) * conversion + 'px',
                                    top: '-=' + 25 * (count - nowpos) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true
                                    //多走一步
                                    if (count == 8) {
                                        $('.peo').animate({
                                            right: '-=' + 40 * conversion + 'px',
                                            top: '-=' + 25 * conversion + 'px'
                                        }, function () {
                                            layer.open({
                                                type: 1,
                                                content: $('.dialog_zhongjiang1'),
                                                skin: 'layui-layer-nobg',
                                                title: false,
                                                closeBtn: 0,
                                                shade: 0.5,
                                                shadeClose: true
                                            });
                                        })
                                        count = count + 1;
                                        nowpos = count;
                                    }
                                    else if (count == 9) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                        }

                        //11-13
                        else if (count > 10 && count <= 13) {
                            if (nowpos == 0) {
                                //把1-4走完
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                })
                                //把4-7走完
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - 4) * conversion + 'px',
                                    top: '+=' + 5 * (7 - 4) * conversion + 'px'
                                })
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - 7) * conversion + 'px',
                                    top: '-=' + 25 * (10 - 7) * conversion + 'px'
                                })
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - 10) * conversion + 'px',
                                    top: '+=' + 25 * (count - 10) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                            else if (nowpos > 4 && nowpos < 7) {
                                //走4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - nowpos) * conversion + 'px',
                                    top: '+=' + 5 * (7 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - 7) * conversion + 'px',
                                    top: '-=' + 25 * (10 - 7) * conversion + 'px'
                                }, 'slow')
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - 10) * conversion + 'px',
                                    top: '+=' + 25 * (count - 10) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true
                                    if (count == 12) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                            else if (nowpos >= 7 && nowpos < 10) {
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - nowpos) * conversion + 'px',
                                    top: '-=' + 25 * (10 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //走10-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - 10) * conversion + 'px',
                                    top: '+=' + 25 * (count - 10) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true
                                    if (count == 12) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                            //走11-13
                            else if (nowpos >= 10) {
                                $('.peo').animate({
                                    right: '-=' + 40 * (count - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (count - nowpos) * conversion + 'px'
                                }, 'slow', function () {
                                    isflag = true
                                    if (count == 12) {
                                        layer.open({
                                            type: 1,
                                            content: $('.dialog_zhongjiang1'),
                                            skin: 'layui-layer-nobg',
                                            title: false,
                                            closeBtn: 0,
                                            shade: 0.5,
                                            shadeClose: true
                                        });
                                    }
                                })
                            }
                        }



                        //13-16
                        else if (count > 13 && count <= 16) {

                            if (nowpos == 0) {
                                //走完1-4
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                })
                                //走完4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - 4) * conversion + 'px',
                                    top: '+=' + 5 * (7 - 4) * conversion + 'px'
                                })
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - 7) * conversion + 'px',
                                    top: '-=' + 25 * (10 - 7) * conversion + 'px'
                                })
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - 10) * conversion + 'px',
                                    top: '+=' + 25 * (13 - 10) * conversion + 'px'
                                })
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 13) * conversion + 'px',
                                    top: '+=' + 25 * (count - 13) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }


                            if (nowpos > 7 && nowpos < 10) {
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - nowpos) * conversion + 'px',
                                    top: '-=' + 25 * (10 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - 10) * conversion + 'px',
                                    top: '+=' + 25 * (13 - 10) * conversion + 'px'
                                }, 'slow')
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 13) * conversion + 'px',
                                    top: '+=' + 25 * (count - 13) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                            else if (nowpos >= 10 && nowpos < 13) {
                                //走10-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (13 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 13) * conversion + 'px',
                                    top: '+=' + 25 * (count - 13) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                            else if (nowpos >= 13) {
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (count - nowpos) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                        }
                        //17
                        else if (count == 17) {

                            if (nowpos == 0) {
                                //走完1-4
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                })
                                //走完4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - 4) * conversion + 'px',
                                    top: '+=' + 5 * (7 - 4) * conversion + 'px'
                                })
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - 7) * conversion + 'px',
                                    top: '-=' + 25 * (10 - 7) * conversion + 'px'
                                })
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - 10) * conversion + 'px',
                                    top: '+=' + 25 * (13 - 10) * conversion + 'px'
                                })
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - 13) * conversion + 'px',
                                    top: '+=' + 25 * (16 - 13) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }

                            if (nowpos >= 10 && nowpos < 13) {
                                //走10-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (13 - nowpos) * conversion + 'px'
                                }, 'slow')
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - 13) * conversion + 'px',
                                    top: '+=' + 25 * (16 - 13) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                }, function () {
                                    isflag = true
                                    layer.open({
                                        type: 1,
                                        content: $('.dialog_zhongjiang1'),
                                        skin: 'layui-layer-nobg',
                                        title: false,
                                        closeBtn: 0,
                                        shade: 0.5,
                                        shadeClose: true
                                    });
                                })
                            }
                            else if (nowpos >= 13 && nowpos < 16) {
                                // 走13 - 16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (16 - nowpos) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                }, function () {
                                    isflag = true
                                    layer.open({
                                        type: 1,
                                        content: $('.dialog_zhongjiang1'),
                                        skin: 'layui-layer-nobg',
                                        title: false,
                                        closeBtn: 0,
                                        shade: 0.5,
                                        shadeClose: true
                                    });
                                })
                            }
                            else if (nowpos == 16) {
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                }, function () {
                                    isflag = true
                                    layer.open({
                                        type: 1,
                                        content: $('.dialog_zhongjiang1'),
                                        skin: 'layui-layer-nobg',
                                        title: false,
                                        closeBtn: 0,
                                        shade: 0.5,
                                        shadeClose: true
                                    });
                                })
                            }
                        }

                        //18 -19
                        else if (count > 17 && count < 20) {
                            if (nowpos == 0) {
                                //走完1-4
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                })
                                //走完4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - 4) * conversion + 'px',
                                    top: '+=' + 5 * (7 - 4) * conversion + 'px'
                                })
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - 7) * conversion + 'px',
                                    top: '-=' + 25 * (10 - 7) * conversion + 'px'
                                })
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - 10) * conversion + 'px',
                                    top: '+=' + 25 * (13 - 10) * conversion + 'px'
                                })
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - 13) * conversion + 'px',
                                    top: '+=' + 25 * (16 - 13) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                })
                                //走18-19
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 17) * conversion + 'px',
                                    top: '+=' + 25 * (count - 17) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }


                            if (nowpos > 10 && nowpos < 13) {
                                //走10-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (13 - nowpos) * conversion + 'px'
                                }, 'slow')
                                // 走13 - 16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - 13) * conversion + 'px',
                                    top: '+=' + 25 * (16 - 13) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                })
                                //走17-18
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 17) * conversion + 'px',
                                    top: '+=' + 25 * (count - 17) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                            else if (nowpos >= 13 && nowpos <= 16) {
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (16 - nowpos) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                })
                                //走17-19
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 17) * conversion + 'px',
                                    top: '+=' + 25 * (count - 17) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                            else if (nowpos > 16 && nowpos < 19) {
                                //走17-19
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - nowpos) * conversion + 'px',
                                    top: '+=' + 25 * (count - nowpos) * conversion + 'px'
                                }, function () {
                                    isflag = true
                                })
                            }
                        }

                        //20 -21
                        else if (count >= 20) {

                            if (nowpos == 0) {
                                //走完1-4
                                $('.peo').animate({
                                    right: '+=' + 40 * (4 - nowpos) * conversion + 'px',
                                    top: '+=' + 40 * (4 - nowpos) * conversion + 'px'
                                })
                                //走完4-7
                                $('.peo').animate({
                                    right: '-=' + 30 * (7 - 4) * conversion + 'px',
                                    top: '+=' + 5 * (7 - 4) * conversion + 'px'
                                })
                                //走8-10
                                $('.peo').animate({
                                    right: '-=' + 40 * (10 - 7) * conversion + 'px',
                                    top: '-=' + 25 * (10 - 7) * conversion + 'px'
                                })
                                //走11-13
                                $('.peo').animate({
                                    right: '-=' + 40 * (13 - 10) * conversion + 'px',
                                    top: '+=' + 25 * (13 - 10) * conversion + 'px'
                                })
                                //走13-16
                                $('.peo').animate({
                                    right: '+=' + 40 * (16 - 13) * conversion + 'px',
                                    top: '+=' + 25 * (16 - 13) * conversion + 'px'
                                })
                                //走16-17
                                $('.peo').animate({
                                    right: '+=' + 40 * conversion + 'px',
                                    top: '-=' + 25 * conversion + 'px'
                                })
                                //走18-19
                                $('.peo').animate({
                                    right: '+=' + 40 * (19 - 17) * conversion + 'px',
                                    top: '+=' + 25 * (19 - 17) * conversion + 'px'
                                })
                                $('.peo').animate({
                                    right: '+=' + 40 * (count - 19) * conversion + 'px',
                                    top: '-=' + 25 * (count - 19) * conversion + 'px'
                                }, function () {
                                    isflag = true;
                                    if (count == 21) {
                                        alert('到达终点')
                                        $('.peo').animate({
                                            right: 170 * conversion + 'px',
                                            top: 205 * conversion + 'px'
                                        })
                                        nowpos = 0;
                                        count = 0
                                    }
                                })
                            }

                            if (nowpos > 13 && nowpos <= 16) {
                                //超出终点到终点停下
                                if (count >= 21) {
                                    //走13-16
                                    $('.peo').animate({
                                        right: '+=' + 40 * (16 - nowpos) * conversion + 'px',
                                        top: '+=' + 25 * (16 - nowpos) * conversion + 'px'
                                    })
                                    //走16-17
                                    $('.peo').animate({
                                        right: '+=' + 40 * conversion + 'px',
                                        top: '-=' + 25 * conversion + 'px'
                                    })
                                    //走17-19
                                    $('.peo').animate({
                                        right: '+=' + 40 * (19 - 17) * conversion + 'px',
                                        top: '+=' + 25 * (19 - 17) * conversion + 'px'
                                    })
                                    //走19-21
                                    $('.peo').animate({
                                        right: '+=' + 40 * (21 - 19) * conversion + 'px',
                                        top: '-=' + 25 * (21 - 19) * conversion + 'px'
                                    }, function () {
                                        isflag = true
                                        alert('到达终点')
                                        $('.peo').animate({
                                            right: 170 * conversion + 'px',
                                            top: 205 * conversion + 'px'
                                        })
                                        nowpos = 0;
                                        count = 0
                                    })
                                }
                                else {
                                    //走13-16
                                    $('.peo').animate({
                                        right: '+=' + 40 * (16 - nowpos) * conversion + 'px',
                                        top: '+=' + 25 * (16 - nowpos) * conversion + 'px'
                                    })
                                    //走16-17
                                    $('.peo').animate({
                                        right: '+=' + 40 * conversion + 'px',
                                        top: '-=' + 25 * conversion + 'px'
                                    })
                                    //走17-19
                                    $('.peo').animate({
                                        right: '+=' + 40 * (19 - 17) * conversion + 'px',
                                        top: '+=' + 25 * (19 - 17) * conversion + 'px'
                                    })
                                    //走19-21
                                    $('.peo').animate({
                                        right: '+=' + 40 * (count - 19) * conversion + 'px',
                                        top: '-=' + 25 * (count - 19) * conversion + 'px'
                                    }, function () {
                                        isflag = true
                                        if (count == 20) {
                                            layer.open({
                                                type: 1,
                                                content: $('.dialog_zhongjiang1'),
                                                skin: 'layui-layer-nobg',
                                                title: false,
                                                closeBtn: 0,
                                                shade: 0.5,
                                                shadeClose: true
                                            });
                                        }
                                    })
                                }

                            }
                            else if (nowpos >= 17 && nowpos < 19) {
                                //超出终点到终点停下
                                if (count >= 21) {
                                    //走17-19
                                    $('.peo').animate({
                                        right: '+=' + 40 * (19 - nowpos) * conversion + 'px',
                                        top: '+=' + 25 * (19 - nowpos) * conversion + 'px'
                                    })
                                    //走19-21
                                    $('.peo').animate({
                                        right: '+=' + 40 * (21 - 19) * conversion + 'px',
                                        top: '-=' + 25 * (21 - 19) * conversion + 'px'
                                    }, function () {
                                        isflag = true
                                        alert('到达终点')
                                        $('.peo').animate({
                                            right: 170 * conversion + 'px',
                                            top: 205 * conversion + 'px'
                                        })
                                        nowpos = 0;
                                        count = 0
                                    })
                                }
                                else {
                                    //走17-19
                                    $('.peo').animate({
                                        right: '+=' + 40 * (19 - nowpos) * conversion + 'px',
                                        top: '+=' + 25 * (19 - nowpos) * conversion + 'px'
                                    })
                                    //走19-21
                                    $('.peo').animate({
                                        right: '+=' + 40 * (count - 19) * conversion + 'px',
                                        top: '-=' + 25 * (count - 19) * conversion + 'px'
                                    }, function () {
                                        isflag = true
                                        if (count == 20) {
                                            layer.open({
                                                type: 1,
                                                content: $('.dialog_zhongjiang1'),
                                                skin: 'layui-layer-nobg',
                                                title: false,
                                                closeBtn: 0,
                                                shade: 0.5,
                                                shadeClose: true
                                            });
                                        }
                                    })
                                }
                            }
                            else if (nowpos >= 19) {
                                //超出终点到终点停下
                                if (count >= 21) {
                                    //走19-21
                                    $('.peo').animate({
                                        right: '+=' + 40 * (21 - nowpos) * conversion + 'px',
                                        top: '-=' + 25 * (21 - nowpos) * conversion + 'px'
                                    }, function () {
                                        isflag = true;
                                        alert('到达终点')
                                        $('.peo').animate({
                                            right: 170 * conversion + 'px',
                                            top: 205 * conversion + 'px'
                                        })
                                        nowpos = 0;
                                        count = 0
                                    })
                                }
                                else {
                                    //走19-21
                                    $('.peo').animate({
                                        right: '+=' + 40 * (count - nowpos) * conversion + 'px',
                                        top: '-=' + 25 * (count - nowpos) * conversion + 'px'
                                    }, function () {
                                        isflag = true
                                        if (count == 20) {
                                            layer.open({
                                                type: 1,
                                                content: $('.dialog_zhongjiang1'),
                                                skin: 'layui-layer-nobg',
                                                title: false,
                                                closeBtn: 0,
                                                shade: 0.5,
                                                shadeClose: true
                                            });
                                        }
                                    })
                                }

                            }
                        }

                    }, 500);
                }

            })

        })

    })
</script>

</html>